import React, { useState, useEffect } from 'react';
import { Button } from 'antd';
import useHoxModel from '../../useHoxModel';
import styles from './index.less';

interface Props {
  onChange?: (value: string) => void;
}
const Week: React.FC<Props> = ({ onChange }) => {
  const { planModeInfo } = useHoxModel((model) => [model.planModeInfo]);
  const [selected, setSelected] = useState('0000000');
  useEffect(() => {
    if (planModeInfo) {
      const selDayInfo = planModeInfo.selDayInfo;
      selDayInfo && setSelected(selDayInfo);
    }
  }, [planModeInfo]);

  const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

  return (
    <div className={styles['week-wrap']}>
      {weeks.map((item: string, index: number) => {
        let weekIndex = 0;
        if (index === 0) {
          weekIndex = 6;
        } else {
          weekIndex = index - 1;
        }
        return (
          <Button
            key={index.toString(36) + index}
            className={Number(selected[weekIndex]) === 1 ? styles['active'] : ''}
            onClick={() => {
              const result = selected
                .split('')
                .map((app: string, i: number) => {
                  if (weekIndex === i) {
                    return app === '1' ? '0' : '1';
                  }
                  return app;
                })
                .join('');
              setSelected(result);
              onChange && onChange(result);
            }}
          >
            {item}
          </Button>
        );
      })}
    </div>
  );
};
export default Week;
